<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文件上传打印</title>
    <script type="text/javascript" th:src="@{/Study/js/main.js}"></script>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
<h1 id="printLabel">打印未完成或者未开始</h1>
<form id="uploadForm" th:action="@{/fileUpload}" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput"/><br/>
    <input type="submit" value="上传至Canon"/>
</form>
<script>
    // 使用 Fetch API 发送 POST 请求
    document.getElementById('uploadForm').onsubmit = function(event) {
        event.preventDefault(); // 阻止表单的默认提交行为

        const formData = new FormData();
        const fileInput = document.getElementById('fileInput');
        formData.append('file', fileInput.files[0]);

        fetch('/fileUpload', {
            method: 'POST',
            body: formData
        })
            .then(response => response.text())
            .then(data => {
                const text = document.getElementById('printLabel');
                text.textContent = '打印完成或即将完成'
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    };
</script>
</body>
</html>
